<!doctype html>
<html>

<head>

  <meta charset="utf-8">
  <script src="../umd/d3plus-core.full.js"></script>

</head>

<body>

  <svg width="100%" height="100vh">
    <g id="path" transform="translate(200,200)"></g>
  </svg>

</body>

<script>

// "M2.4737865342776535e-14,-404A404,404,0,1,1,-2.4737865342776535e-14,404A404,404,0,1,1,2.4737865342776535e-14,-404Z"
// "M2.397246109330944e-14,-391.5A391.5,391.5,0,1,1,-391.1824927841695,15.764115552836005L0,0Z"

  // const path = new d3plus.Path()
  //   .data([{id: "test"}])
  //   .d("M2.4737865342776535e-14,-404A404,404,0,1,1,-2.4737865342776535e-14,404A404,404,0,1,1,2.4737865342776535e-14,-404Z")
  //   .select("#path")
  //   .label(d => d.id)
  //   .render();

  // setTimeout(() => {
  //   path.d("M2.397246109330944e-14,-391.5A391.5,391.5,0,1,1,-391.1824927841695,15.764115552836005L0,0Z").render();
  // }, 2000);

  const data = [
    {id: "alpha", d: "M-117.79054869229232,145.88226978892504A187.5,187.5,0,0,1,-171.16363035534775,-76.5458140173444L-0.972396883051175,0.23333302773580836Z"},
    {id: "beta", d: "M-17.79054869229232,45.88226978892504A187.5,87.5,0,0,1,-71.16363035534775,-76.5458140173444L-0.972396883051175,0.23333302773580836Z"},
    {id: "gamma", d: "M1.118029763380601,-209.99702381092973A210,210,0,1,1,-158.7013523376691,-137.52774544140178L-79.71565740490466,-68.34042701435123A105,105,0,1,0,1.1180297633805785,-104.99404749531374Z"},
    // {id: "eta", d: "M1.118029763380601,-209.99702381092973L21.08245953949729,-208.9390578608161L40.85580968737746,-205.98738508653582L60.25886561452166,-201.16875780013908L79.11576886825439,-194.52684934575214L97.25561101843411,-186.12185826879937L114.51398267592714,-176.02996271003826L130.73446360740573,-164.34262996947538L145.77004044090563,-151.16578749788835L159.48443911284852,-136.6188628296258L-158.7013523376691,-137.52774544140178L-79.71565740490466,-68.34042701435123L-91.2125887356109,-52.01214912064591L-99.4102131452557,-33.80250763500883L-104.01200929477919,-14.370174754078912L-104.8515227715186,5.581950599361854L1.1180297633805785,-104.99404749531374Z"}
  ];

  const path = new d3plus.Path()
    .data(data)
    .d(d => d.d)
    .backgroundImage("https://oec.world/images/icons/country/country_usa.png")
    .select("#path")
    .label(d => `${d.id} Long Title`)
    .labelConfig({fontColor: "red"})
    // .duration(0)
    // .fill(d => d.id === "alpha" ? "red" : "blue")
    .x((d, i) => 50 + i * 350)
    .y(100)
    .render();

  // setTimeout(() => {
  //   path.data([data[1]]).render();
  // }, 2000);

</script>

</html>
